<template>
    <el-card shadow="hover" header="我的常用" v-loading="loading">
		<div style="padding: 20px;">
            <ul class="myMods">
                <li v-for="mod in myMods" :key="mod.path" :style="{background:mod.meta.color||'#909399'}">
                    <a v-if="mod.meta.type=='link'" :href="mod.path" target="_blank">
                        <i :class="mod.meta.icon||'el-icon-menu'"></i>
                        <p>{{ mod.meta.title }}</p>
                    </a>
                    <router-link v-else :to="{ path: mod.path }">
                        <i :class="mod.meta.icon||'el-icon-menu'"></i>
                        <p>{{ mod.meta.title }}</p>
                    </router-link>
                </li>
                <li class="modItem-add" @click="addMods">
                    <a href="javascript:void(0)">
                        <i class="el-icon-plus"></i>
                    </a>
                </li>
            </ul>

            <el-drawer title="添加应用" v-model="modsDrawer" :size="570" destroy-on-close :close-on-click-modal="false">
                <el-container>
                    <el-main class="nopadding">
                        <el-scrollbar>
                            <div class="setMods">
                                <h4>我的常用 ( {{myMods.length}} )</h4>
                                <draggable tag="ul" v-model="myMods" animation="200" item-key="path" group="common">
                                    <template #item="{ element }">
                                        <li :style="{background:element.meta.color||'#909399'}">
                                            <i :class="element.meta.icon||'el-icon-menu'"></i>
                                            <p>{{element.meta.title}}</p>
                                        </li>
                                    </template>
                                </draggable>
                            </div>
                            <div class="setMods">
                                <h4>全部应用 ( {{filterMods.length}} )</h4>
                                <draggable tag="ul" v-model="filterMods" animation="200" item-key="path" :sort="false" group="common">
                                    <template #item="{ element }">
                                        <li :style="{background:element.meta.color||'#909399'}">
                                            <i :class="element.meta.icon||'el-icon-menu'"></i>
                                            <p>{{element.meta.title}}</p>
                                        </li>
                                    </template>
                                </draggable>
                            </div>
                        </el-scrollbar>
                    </el-main>
                    <el-footer>
                        <el-button size="small" @click="closeBtn">关 闭</el-button>
                        <el-button type="primary" :loading="isSaveing" size="small" @click="saveMods">保 存</el-button>
                    </el-footer>
                </el-container>
            </el-drawer>
        </div>
    </el-card>
</template>

<script>
	import draggable from 'vuedraggable'

	export default {
        title: "工具",
		icon: "el-icon-time",
		description: "常用工具",
		components: {
			draggable
		},
		data() {
			return {
				mods: [],
				myMods: [],
				myModsName: [],
				filterMods: [],
				modsDrawer: false,
				myModsList: [],
				myModsNameList: [],
				isSaveing: false,
			}
		},
		mounted(){
			this.getMods()
		},
		methods: {
			addMods(){
				this.modsDrawer = true
				this.filterMods =  this.mods.filter(item => {
					return !this.myModsName.includes(item.name)
				})
			},
			async getMods(){
				//这里可用改为读取远程数据
				let arr = ['personal_commonly_used_functions']
				var res = await this.$API.system.common.get({key: arr})
				if(res.error == 0){
					this.myModsName = res.data.personal_commonly_used_functions.length ? res.data.personal_commonly_used_functions : []
					this.myModsNameList = res.data.personal_commonly_used_functions.length ? res.data.personal_commonly_used_functions : []
				}
				
				var menuTree = await this.$router.sc_getMenu();
				if(menuTree) this.filterMenu(menuTree)
				this.myMods = this.mods.filter(item => {
					return this.myModsName.includes(item.name)
				})
				this.myModsList = this.myMods
				this.filterMods =  this.mods.filter(item => {
					return !this.myModsName.includes(item.name)
				})
			},
			filterMenu(map){
				map.forEach(item => {
					if(item.meta.hidden){
						return false
					}
					if(item.meta.type=='iframe'){
						item.path = `/i/${item.name}`
					}
					if(item.children&&item.children.length > 0){
						this.filterMenu(item.children)
					}else{
						this.mods.push(item)
					}
				})
			},
			async saveMods(){
				this.isSaveing = true;
				const myModsName = this.myMods.map(v => v.name)
				let info = [
					{
						"key": "personal_commonly_used_functions",
						"value" : myModsName
					}
				]
				var res = await this.$API.system.common.put({config: info}).catch(()=>{
					this.isSaveing = false;
				})
				this.isSaveing = false;
				if(res.error == 0){
					this.$TOOL.data.set("my-mods", myModsName)
					this.$notify.success("设置常用成功")
					this.myModsName = myModsName
					this.myModsNameList = myModsName
					this.myModsList = this.myMods
					this.modsDrawer = false
				}
			},
			// 关闭不保存
			closeBtn(){
				let status = this.getbj()
				if(!status){
					this.$confirm('检测到你的常用有修改，退出后不会保存修改，是否退出?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						this.modsDrawer = false
						this.myMods = this.myModsList
						this.myModsName = this.myModsNameList
					})
					.catch(() => {
					});
				}else {
					this.modsDrawer = false
					this.myMods = this.myModsList
					this.myModsName = this.myModsNameList
				}
			},
			getbj(){
				for(let i = 0; i < this.myModsList.length; i++){
					if(this.myMods.indexOf(this.myModsList[i]) == -1){
						return false
					}
				}
				for(let i = 0; i < this.myMods.length; i++){
					if(this.myModsList.indexOf(this.myMods[i]) == -1){
						return false
					}
				}
				for(let i = 0; i < this.myMods.length; i++){
					if(this.myMods[i].name != this.myModsList[i].name){
						return false
					}
				}
				return true
			}
		}
	}
</script>

<style scoped>
	.myMods {list-style:none;margin:-10px;}
	.myMods li {display: inline-block;width: 100px;height:100px;vertical-align: top;transition:all 0.3s ease;margin:10px;border-radius:5px;}
	.myMods li:hover {opacity: 0.8;}
	.myMods li a {width: 100%;height: 100%;padding:10px;display: flex;flex-direction: column;align-items: center;justify-content: center;text-align: center;color: #fff;}
	.myMods li i {font-size: 26px;color: #fff;}
	.myMods li p {font-size: 12px;color: #fff;margin-top: 10px;width: 100%;white-space:nowrap;text-overflow:ellipsis;overflow: hidden;}

	.modItem-add {border: 1px dashed #ddd;cursor: pointer;}
	.modItem-add i {font-size: 30px;color: #999!important;}
	.modItem-add:hover,.modItem-add:hover i {border-color: #409EFF;color: #409EFF!important;}

	.setMods {padding:0 20px;}
	.setMods h4 {font-size: 14px;font-weight: normal;}
	.setMods ul {margin:20px -5px;min-height: 90px;}
	.setMods li {display: inline-block;width: 80px;height:80px;text-align: center;margin:5px;color: #fff;vertical-align: top;padding:4px;padding-top:15px;cursor: move;border-radius: 3px;}
	.setMods li i {font-size: 20px;}
	.setMods li p {font-size: 12px;margin-top: 10px;}
	.setMods li.sortable-ghost {opacity: 0.3;}
</style>
